<template>
  <div class="home">
    <!-- 为了防止闪烁，需要等用户信息获取完毕后再展示首页 -->
    <el-card class="box-card" v-if="!$store.state.user.isPullingInfo">
      <el-collapse-transition :duration="3000">
        <div v-show="show">
          <div>home {{ getMsg }}</div>
        </div>
      </el-collapse-transition>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Home",
  created() {
    const jwt_token = localStorage.getItem("jwt_token");
    if (jwt_token) {
      let outer = this;
      this.$store.commit("updateToken", jwt_token);
      this.$store.dispatch("getInfo", {
        success(resp) {
          outer.$store.commit("setIsLogin", true);
          outer.show = true;
        },
        error(resp) {
          console.log("获取用户信息失败" + resp);
          outer.show = true;
        },
      });
    } else {
      this.show = true;
    }
  },
  data() {
    return {
      msg: "您还没有登录，请登陆后重试",
      show: false,
    };
  },
  computed: {
    getMsg() {
      let s1 = "您还没有登录，请登陆后重试";
      let s2 = "您已登录";
      if (this.$store.state.user.isLogin == true) {
        this.msg = s2;
      } else {
        this.msg = s1;
      }
      return this.msg;
    },
  },
};
</script>

<style scoped>
.el-collapse-transition-enter-active {
  transition: height 3s;
}

.el-collapse-transition-leave-active {
  transition: height 3s;
}
</style>
